﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link href="./swuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="./lib/animate/animate.min.css" rel="stylesheet" />
    <link href="./lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
    <link href="./swuiadmin/swui/css/swui.css" rel="stylesheet" />
    <link href="./swuiadmin/swui/css/login.css" rel="stylesheet" />
    <style>
        body {
            /*在页面顶部加载背景最佳，如有必要这块可以从数据库读取*/
            background-image: url(images/bg_04.jpg);
        }
    </style>
</head>
<body>
    <div id="login_div" class="animated fadeIn layui-hide">
        <p class='swui-name'></p>
        <div><i class="layui-icon layui-icon-username"></i></div>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="swui-from-group">
                    <input class="layui-input" name="username" value="" placeholder="用户名(默认admin)" height="36" />
                    <div><i class="layui-icon layui-icon-username"></i></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="swui-from-group">
                    <input class="layui-input" type="password" name="password" value="" placeholder="密码(默认admin)" height="36" />
                    <button lay-submit lay-filter="login"><i class="fa fa-arrow-right"></i></button>
                </div>
            </div>
        </form>
    </div>
    <div id="date_div" class="animated fadeIn">
        <p class='swui-name'></p>
        <div id="date_time"></div>
    </div>
    <script src="./swuiadmin/layui/layui.js"></script>
    <script>
    layui.extend({
        swui: 'swuiadmin/swui/swui',
        setter: 'swuiadmin/swui/config.dev',
        ajax: 'swuiadmin/swui/js/ajax'
    }).define(['jquery','setter','ajax','form','swui'], function (exports) {
        var $ = layui.$, form = layui.form, index;
        $(function () {
            var index,timer;
            $('p.swui-name').html(swui.setter.name);
            swui.renderTitle();
            setInterval(function(){
                swui.setBgImage('body');
            },60000);
            var showUnlockDiv = function () {
                swui.stopSysTime(index);
                timer = setTimeout(function(){//30秒不登录则显示时间
                    showTimeDiv();
                }, 30000);
                $('#date_div').addClass(swui.cssName.HIDE);
                $('#login_div').removeClass(swui.cssName.HIDE);
                //解绑旧的鼠标键盘事件
                $(document).off('mouseup');
                $(document).off('keydown').on('keydown', function (e) {
                    var ev = document.all ? window.event : e;
                    if (ev.keyCode == 27) {
                        //按下ESC
                        showTimeDiv();
                    }
                });
            }, showTimeDiv = function () {
                clearTimeout(timer);
                index = swui.sysTime('#date_time', '<p id="time">!HH:!mm</p><p id="date">!M月!d日,星期!w</p>');
                $('#date_div').removeClass(swui.cssName.HIDE);
                $('#login_div').addClass(swui.cssName.HIDE);
                //绑定新事件
                $(document).on('mouseup', function (e) {
                    if (!e) e = window.event;
                    if (e.button == 0) {
                        //左键
                        showUnlockDiv();
                    }
                });
                $(document).off('keydown').on('keydown', function (e) {
                    var ev = document.all ? window.event : e;
                    if (ev.keyCode == 13) {
                        //按下回车
                        showUnlockDiv();
                    }
                });
            };
            showTimeDiv();
            //解锁点击
            form.on('submit(login)', function (data) {
                swui.login({username:data.field.username, password:data.field.password,success:'login'});
                return false;
            });
        });
    });
    </script>  
</body>
</html>